<!DOCTYPE html>
<%@page import="mobi.weq.model.User"%>
<%@page import="mobi.weq.util.Util"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Settings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap/js/bootstrap.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.min.css">

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/settings.js"></script>

<link href="js/bootstrap-switch/bootstrap-switch.css" rel="stylesheet">
<script src="js/bootstrap-switch/bootstrap-switch.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/home.css">
<style type="text/css">
.property {
	font-size: large;
	line-height: 28px;
	text-align: right;
}
</style>
</head>
<body>
	<!-- Fixed navbar -->
	<header class="title"> Settings &amp; Preferences </header>
	<div class="content">
		<%
			User user = Util.getUserFromSession(request, response);
			if (user != null) {
		%>
		<div class="panel panel-default">
			<div class="panel-heading" style="text-align: center;">
				<div class=row>
					<div class="col-xs-4">
						<a href="settings" class="btn btn-info">Ignore</a>
					</div>
					<div class="col-xs-4"><div class="alert alert-success" role="alert" id="messages" style="padding: 5px;margin-bottom:0;display: none"></div></div>
					<div class="col-xs-4">
						<button type="submit" class="btn btn-warning" id="save-buttom">Save</button>
					</div>
				</div>
			</div>
			<form>
				<ul class="list-group">
					<li class="list-group-item">
						<div class="row">
							<div class="col-xs-6">
								<div class="property">Use user feedback?</div>
							</div>
							<div class="col-xs-6">
								<input data-on-text="YES" data-off-text="NO" type="checkbox" data-on-color="success" name="using-user-feedback"
									<%=user.isUsingUserFeedback() ? "checked" : ""%>>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-xs-6">
								<div class="property">Has respiratory infections?</div>
							</div>
							<div class="col-xs-6">
								<input data-on-text="YES" data-off-text="NO" type="checkbox" data-on-color="success" type="checkbox"
								name="has-respiratory-problems" <%=user.isHavingRespiratoryProblems() ? "checked" : ""%>>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-xs-6">
								<div class="property">Has lung related health problem?</div>
							</div>
							<div class="col-xs-6">
								<input data-on-text="YES" data-off-text="NO" type="checkbox" data-on-color="success" type="checkbox"
									name="has-lung-problems" <%=user.isHavingLungProblems() ? "checked" : ""%>>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-xs-6">
								<div class="property">Has heart related health problem?</div>
							</div>
							<div class="col-xs-6">
								<input data-on-text="YES" data-off-text="NO" type="checkbox" data-on-color="success" type="checkbox"
									name="has-heart-problems" <%=user.isHavingHeartProblems() ? "checked" : ""%>>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-xs-6">
								<div class="property">Age group</div>
							</div>
							<div class="col-xs-6">
								<select class="form-control" style="width: 130px" name="age-group">
									<option value="unspecified" <%=user.getAgeGroup().equals("unspecified") ? "selected" : ""%>>Unspecified</option>
									<option value="child" <%=user.getAgeGroup().equals("child") ? "selected" : ""%>>0-14 years</option>
									<option value="adult" <%=user.getAgeGroup().equals("adult") ? "selected" : ""%>>15-65 years</option>
									<option value="senior" <%=user.getAgeGroup().equals("senior") ? "selected" : ""%>>65+ years</option>
								</select>
							</div>
						</div>
					</li>
					<li class="list-group-item" style="text-align: center;">
						<a href="user/logout" class="btn btn-warning">Logout</a>
					</li>
					<li class="list-group-item" style="text-align: center;">
						<a href="user/delete" class="btn btn-danger">Delete Account</a>
					</li>
				</ul>
			</form>
		</div>
		<%
			}
		%>
	</div>
	<jsp:include page="/jsp/templates/footer.jsp" /></body>
</html>